<template>
  <!--Top-->
  <div>
    <input type="text" placeholder="  请输入需要需要添加的任务，按回车键提交" class="inputClass solidClass"
           @keyup.enter="addTask" v-model="taskName">
  </div>
</template>

<script>
  export default {
    name: "top",
    props: {
      taskMsgs: Array
    },
    data() {
      return {
        taskName: ""
      }
    },
    methods: {
      addTask() {
        //判断输入是否为空
        const newTaskName = this.taskName.trim();
        //使用完之后把此置空，释放内存
        this.taskName = "";
        if (newTaskName != null) {
          let taskMsg = {"taskName": newTaskName, "taskState": false}
          //添加在数组第一个位置
          this.taskMsgs.unshift(taskMsg)

        }
      }
    }
  }
</script>

<style scoped>
  .inputClass {
    width: 99%;
    height: 50px;
  }

  .solidClass {
    border: 1px solid silver
  }
</style>
